<template>
  <div class="data-management-main">
    <!-- sql 查询 -->
    <div v-if="isSqlSearch" class="sql-search-view">
      <div class="return-nav-bar">
        <a-button
          class="cancel-button"
          type="link"
          icon="left"
          @click="cancel(false)"
        >
          <span>返回</span>
        </a-button>
        <span class="return-nav-text" style="color: #999;">|</span>
        <span class="return-nav-text return-nav-text-title">SQL查询</span>
      </div>
      <div class="upload-content content">
        <sql-search-page />
      </div>
    </div>
    <!-- 数据管理 -->
    <div v-else-if="dataTabIndex === '1'" class="data-management">
      <div>
        <a-layout>
          <a-layout-sider
            v-show="!dataSiderCollapsed"
            :width="`${currentSiderWidth}px`"
          >
            <!-- 数据列表 -->
            <data-sider
              ref="dataSider"
              :selected-keys="selectedKeys"
              @set-selected-keys="setSelectedKeys"
            ></data-sider>
            <div id="data-sider-resize-line" class="data-sider-resize-line" />
          </a-layout-sider>
          <a-layout-content ref="dataview">
            <!-- 控制数据列表面板开关 -->
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{
                  dataSiderCollapsed ? '展开数据列表' : '收起数据列表'
                }}</span>
              </template>
              <div class="handler" @click="toggleDataSiderCollapsed">
                <a-icon :type="dataSiderCollapsed ? 'right' : 'left'" />
              </div>
            </a-tooltip>
            <div
              class="highlight-line"
              :style="{
                left: `${
                  dataSiderCollapsed ? 15.5 : 15.5 + currentSiderWidth
                }px`,
              }"
            />
            <div class="dataview-content-wrapper">
              <div
                v-if="
                  selectedDatasetId < 0 &&
                  !selectedGraphFileName &&
                  selectedKGraphFileId < 0 &&
                  !isUploading &&
                  !isSqlSearch
                "
                class="dataview-empty"
              >
                <div class="buttons buttons-in-blank-nav">
                  <a-button type="link" @click="viewDataStatus">
                    <span>数据统计</span>
                    <span class="arrow-icon">
                      <a-icon type="right" />
                    </span>
                  </a-button>
                </div>
                <div class="dataview-empty-main">
                  <div>
                    <img alt="" src="@/assets/view/dataview-empty.svg" />
                    <div style="margin-top: 8px;">暂无详情</div>
                    <div>点击下面按钮导入数据~</div>
                    <div class="buttons buttons-in-blank" @click="uploadData">
                      <a-button type="link" class="icon-button-reverse">
                        <img
                          alt=""
                          class="icon-button-prefix"
                          src="@/assets/dataset/upload-data-active.svg"
                        />
                        导入数据
                      </a-button>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="dataview-content">
                <!-- 导入数据页面 header -->
                <div v-if="isUploading" class="return-bar">
                  <a-button
                    class="cancel-button"
                    type="link"
                    icon="close"
                    @click="cancel(false)"
                  >
                    <span>取消</span>
                  </a-button>
                  <span class="upload-text" style="color: #999;">|</span>
                  <span class="upload-text upload-text-title">导入数据</span>
                </div>
                <!-- 数据导入页面 内容 -->
                <div v-if="isUploading" class="upload-content content">
                  <data-upload-index
                    id="data-upload-index"
                    ref="dataUploadIndex"
                    @set-selected-keys="setSelectedKeys"
                    @begin-database-upload="beginDatabaseDataUpload"
                  />
                  <!-- <data-upload-page
                      id="data-upload-page"
                      ref="dataUploadPage"
                      :style="{
                        opacity: dataIsUploading && !uploadFinished ? 0.6 : 1,
                      }"
                      @begin-database-upload="beginDatabaseDataUpload"
                      @set-selected-keys="setSelectedKeys"
                    /> -->
                </div>
                <!-- 数据预览内容 -->
                <div v-else class="content">
                  <div class="buttons">
                    <!-- 点击导入数据 新用户引导 step-2 -->
                    <guide-step-popover :guide-step="2">
                      <template #header>
                        <a-tooltip>
                          <a-button
                            type="link"
                            class="icon-button-reverse"
                            @click="uploadData"
                          >
                            <img
                              alt=""
                              class="icon-button-prefix"
                              src="@/assets/dataset/upload-data-active.svg"
                            />
                            导入数据
                          </a-button>
                        </a-tooltip>
                      </template>
                    </guide-step-popover>
                    <a-button type="link" @click="viewDataStatus">
                      <span>数据统计</span>
                      <span class="arrow-icon">
                        <a-icon type="right" />
                      </span>
                    </a-button>
                  </div>
                  <data-view-content
                    v-if="
                      selectedDatasetId >= 0 ||
                      selectedGraphFileName ||
                      selectedKGraphFileId >= 0
                    "
                    :is-in-sql="false"
                    class="data-view-container"
                  />
                </div>
              </div>
            </div>
          </a-layout-content>
        </a-layout>
      </div>
      <!-- 弹框 -->
      <DataEditModal :selected-database-type="'mysql'"></DataEditModal>
    </div>
    <!-- 数据统计 -->
    <div v-else class="data-status-view">
      <div class="return-nav-bar">
        <a-button
          class="cancel-button"
          type="link"
          icon="left"
          @click="cancel(true)"
        >
          <span>返回</span>
        </a-button>
        <span class="return-nav-text" style="color: #999;">|</span>
        <span class="return-nav-text return-nav-text-title">数据统计</span>
      </div>
      <div class="upload-content content">
        <data-status-page />
      </div>
    </div>

    <!-- 数据库导入 结果 右上角通知提醒框 -->
    <div v-if="dataIsUploading">
      <data-is-uploaded-page
        class="upload-progress-container"
        :upload-progresses="getResult"
        :finished="finished"
        @reset-result="resetResult"
        @set-selected-keys="setSelectedKeys"
        @clear-progresses-interval="clearProgressesInterval"
      />
    </div>
    <!-- 开始引导弹框 -->
    <guide-start-end-modal :type="'start'" />
  </div>
</template>

<script lang="ts">
/**
 * data management view
 * @author Huihua Lu
 */
import { Component, Vue, Watch } from 'vue-property-decorator'
// @ts-ignored
import AProgress from 'ant-design-vue/es/progress/progress'
import DataSider from '@/components/data/DataSider.vue'
import DataViewContent from '@/components/data/DataViewContent.vue'
import DataStore from '@/store/modules/data'
import DataUploadPage from '@/components/data/DataUploadPage.vue'
import DataUploadIndex from '@/components/data/DataUploadIndex.vue'
import DataIsUploadedPage from '@/components/data/DataIsUploadedPage.vue'
import SqlSearchPage from '@/components/data/SqlSearchPage.vue'
import { Modal } from 'ant-design-vue'
import {
  setWatermark,
  deleteWatermark,
  removeResizeListener,
} from '@/util/util'
import UserStore from '@/store/modules/user'
import DataStatusPage from '@/components/data/DataStatusPage.vue'
import DataEditModal from '@/components/data/DatasetEditModal.vue'
import GuideStartEndModal from '@/components/user-guide/GuideStartEndModal.vue'
import UserGuideStore from '@/store/modules/user-guide'
import GuideStepPopover from '@/components/user-guide/GuideStepPopover.vue'

@Component({
  components: {
    DataSider,
    DataViewContent,
    DataUploadPage,
    DataIsUploadedPage,
    AProgress,
    SqlSearchPage,
    DataStatusPage,
    DataEditModal,
    GuideStartEndModal,
    DataUploadIndex,
    GuideStepPopover,
  },
})
export default class DataView extends Vue {
  // 轮询timer
  private timer: any
  // 轮询得到的任务进度
  public result: any = { finalFlag: false, progress: [] }
  // 任务是否已完成
  private finished: boolean = false
  // 侧边栏选中的项目
  private selectedKeys = ['']
  // 当前显示的页面，'1'为我的数据页，'2'为数据统计页
  private dataTabIndex: string = '1'

  private dataSiderCollapsed: boolean = false

  private viewEventInited: boolean = false

  public $refs!: {
    dataSider: any
    dataview: any
    dataUploadPage: DataUploadPage
  }

  async created() {
    this.enableTaskPolling()
    this.dataTabIndex = DataStore.dataTabIndex
    // this.getTaskProgresses()
  }

  public mounted() {
    if (this.$route.path === '/management/data/import') {
      DataStore.setIsUploading(true)
    } else {
      DataStore.setIsUploading(false)
    }
    this.initViewEvent()
  }

  public updated() {
    if (this.isSqlSearch || this.dataTabIndex !== '1') {
      this.viewEventInited = false
    } else if (
      !this.viewEventInited &&
      !this.isSqlSearch &&
      this.dataTabIndex === '1'
    ) {
      this.initViewEvent()
    }
  }

  //  创建水印的函数
  private createWaterMark() {
    const areaName = '.dataview-content-wrapper'
    setTimeout(() => {
      setWatermark(this.username, areaName)
    }, 500)
  }

  public get username() {
    return UserStore.currentUser ? UserStore.currentUser.name : '未命名用户'
  }

  beforeDestroy() {
    deleteWatermark('water_mark')
    removeResizeListener()
  }

  destroyed() {
    clearInterval(this.timer)
    DataStore.cancelImport()
  }

  public get currentTabIndex() {
    return DataStore.dataTabIndex
  }

  @Watch('currentTabIndex', { immediate: true, deep: true })
  onCurrentTabIndexChanged() {
    this.dataTabIndex = DataStore.dataTabIndex
  }

  public get routePath() {
    return this.$route.path
  }

  @Watch('routePath', { immediate: true, deep: true })
  onPathChanged() {
    if (this.$route.path === '/management/data') {
      DataStore.setDataTabIndex('1')
      //  若不存在水印，则需要创建
      if (!document.querySelector('#water_mark')) {
        this.createWaterMark()
      }
    } else if (this.$route.path === '/management/data/status') {
      DataStore.setDataTabIndex('2')
    }
  }

  @Watch('isUploading')
  onIsUploadingChange() {
    if (!this.isUploading && this.routePath === '/management/data/import') {
      this.$router.replace('/management/data')
    }
  }

  private uploadFinished = false

  private siderMinWidth = 210 // 最小宽度
  private siderMaxWidth = 380 // 最大宽度
  private currentSiderWidth = 240 // 当前宽度

  // 初始化resize事件
  public initViewEvent() {
    this.viewEventInited = true
    const resizeBar = document.querySelector('#data-sider-resize-line') as any

    // 鼠标按下事件
    const mouseDownEvent = ($event: any) => {
      const initcurrentSiderWidth = this.currentSiderWidth
      const startX = $event.clientX
      const mouseMoveEvent: any = (event: any) => {
        event.preventDefault()
        const endX = event.clientX
        const moveLength = endX - startX
        let newWidth = initcurrentSiderWidth + moveLength
        if (newWidth > this.siderMaxWidth) {
          newWidth = this.siderMaxWidth
        } else if (newWidth < this.siderMinWidth) {
          newWidth = this.siderMinWidth
        }
        this.currentSiderWidth = newWidth
        this.$forceUpdate()
      }
      document.addEventListener('mousemove', mouseMoveEvent)
      const mouseUpEvent: any = () => {
        document.removeEventListener('mousemove', mouseMoveEvent)
        document.removeEventListener('mouseup', mouseUpEvent)
        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
        resizeBar.releaseCapture && resizeBar.releaseCapture()
      }
      document.addEventListener('mouseup', mouseUpEvent)
      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      resizeBar.setCapture && resizeBar.setCapture()
      return false
    }
    resizeBar.addEventListener('mousedown', mouseDownEvent)
    this.$once('hook:beforeDestroy', () => {
      resizeBar.removeEventListener('mousedown', mouseDownEvent)
    })
  }

  /**
   * 上传页面发起上传请求，开始轮询
   */
  public async beginDatabaseDataUpload(passData: any) {
    this.resetResult()
    this.uploadFinished = false
    // 标识当前开始导入
    DataStore.setBeginDatabaseUpload(true)
    // 显示加载进度页面
    DataStore.setDataIsUploading(true)
    await DataStore.uploadDatabase(passData).then(() => {
      this.enableTaskPolling()
    })
    // 新用户指引
    UserGuideStore.toSpecifiedGuideStep(5)
  }

  // 开启任务状态轮询
  public async enableTaskPolling() {
    await this.getTaskProgresses()
    // 任务未完成，当前正在导入数据，则轮询查看当前任务是否上传完毕
    if (this.result && !this.result.finalFlag) {
      this.timer = setInterval(async () => {
        await this.getTaskProgresses()
      }, 2000)
    }
  }

  /**
   * 查询任务进度
   */
  public async getTaskProgresses() {
    await DataStore.getDatabaseImportProgress()
      .then(async (response) => {
        if (response.status !== 200 && response.data.code !== 100) {
          this.$message.error(
            `进度信息获取失败！错误信息：${response.data.message}`
          )
          this.finished = true
          clearInterval(this.timer)
        }
        if (!this.finished) {
          this.result = response.data.result
        }
        if (!this.result) {
          if (this.beginDatabaseUpload) {
            // 数据导入页面点击确定跳转过来的逻辑，忽略result=null的状态，可能后端还未修改
            this.finished = false
            DataStore.setBeginDatabaseUpload(false)
          } else {
            // 页面初始化时的逻辑，result===null，则停止轮询
            // DataStore.loadDatasetCategory()
            DataStore.setDataIsUploading(false)
            this.finished = true
          }
        } else {
          DataStore.setDataIsUploading(true)
          this.result = response.data.result
          if (this.result.finalFlag) {
            this.uploadFinished = true
            // 任务已完成或已取消
            // await DataStore.loadDatasetCategory()
            this.finished = true
            let isHealthy = true
            this.result.progresses.forEach((item: any) => {
              if (item.err) {
                isHealthy = false
              }
            })
            if (isHealthy) {
              this.$message.success('数据上传导入完成！')
              const datasetIds = this.result.progresses.map((value: any) => {
                return value.datasetId
              })
              const lastTableId = datasetIds.slice(-1)[0]
              DataStore.setSelectedDatasetId(lastTableId)
              this.setSelectedKeys([`dataset${lastTableId}`])
              DataStore.cancelImport()
              DataStore.setDataIsUploading(true)
              this.$router.push('/management/data')
            } else {
              this.$message.error('部分数据导入失败！')
            }
          } else {
            // 任务未完成
            this.result = response.data.result
            this.finished = false
          }
          if (this.finished) {
            clearInterval(this.timer)
            DataStore.loadDatasetCategory()
          }
        }
      })
      .catch(() => {
        this.$message.error('任务进度获取失败')
        clearInterval(this.timer)
      })
  }

  // 重置进度
  public resetResult() {
    // if(!this.result)
    this.result = { finalFlag: false, progresses: [] }
    // console.log('reset---befor-----',this.result)
    // this.result.finalFlag=false
    // this.result.progresses=[]
    DataStore.setDataIsUploading(false)
  }

  public get selectedDatasetId() {
    return DataStore.selectedDatasetId
  }

  public get selectedGraphFileName() {
    return DataStore.selectedGraphFileName
  }

  public get selectedKGraphFileId() {
    return DataStore.selectedKGraphFileId
  }

  public get isUploading() {
    return DataStore.isUploading
  }

  public get dataIsUploading() {
    return DataStore.dataIsUploading
    // return true
  }

  public get beginDatabaseUpload() {
    return DataStore.beginDatabaseUpload
  }

  public get getResult() {
    if (!this.result) {
      this.result = { progresses: [], finalFlag: false }
    }
    let sumCostTime = 0
    let sumCount = 0
    // this.result = {finalFlag:true, progresses:[{table: 'aa23a',progress:12,err:'1111111'},{table:'aaab',progress:10000,costTime:123,count:1000},{table:'aaa',progress:780,count:1000},{table:'bbb',progress:1235,status:'进行中'},{table:'bbb2',progress:1235,status:'进行中'}]}
    if (this.result.finalFlag) {
      this.result.progresses.forEach((item: any) => {
        if (item.progress === 10000 && !item.err) {
          sumCostTime =
            item.costTime > sumCostTime ? item.costTime : sumCostTime
          sumCount += item.count
        }
      })
      this.$set(this.result, 'sumCostTime', sumCostTime)
      this.$set(this.result, 'sumCount', sumCount)
    }
    return this.result
  }

  // 停止轮询查看导入进度
  public clearProgressesInterval() {
    clearInterval(this.timer)
    // 获取最终进度结果
    DataStore.getDatabaseImportProgress().then((response) => {
      if (response.data.code === 100) {
        this.result = response.data.result
      } else {
        this.$message.error('进度获取失败')
      }
    })
  }

  // // 点击“导入数据按钮”之后的交互
  // public clickUploadButton() {
  //   // 已经传输完毕，则隐藏进度页面
  //   if(this.finished) {
  //     DataStore.cancelImport()
  //     DataStore.setIsUploading(true)
  //     if(!this.result)
  //     DataStore.setDataIsUploading(false)
  //   }
  // }

  public get lastOfPreSelectedDataset() {
    return DataStore.preSelectedDataset.length > 0
      ? DataStore.preSelectedDataset.slice(-1)[0]
      : { id: -1, name: '', type: '' }
  }

  public viewDataStatus() {
    this.$router.push('/management/data/status')
  }

  // 取消按钮逻辑
  public cancel(inStatusPage: boolean) {
    if (
      DataStore.isUploading &&
      DataStore.dataIsUploading &&
      !this.uploadFinished
    ) {
      // 当前为数据进度展示页面，点击取消->取消未完成任务
      Modal.confirm({
        title: '确定要取消数据导入么？',
        content: '取消数据导入将取消所有未完成的任务',
        okText: '确定',
        cancelText: '取消',
        onOk: this.cancelDatabaseImport,
      })
    } else if (DataStore.isUploading) {
      // 导入界面，返回之前的数据表视图
      DataStore.setIsUploading(false)
      DataStore.setSelectedDatasetId(this.lastOfPreSelectedDataset.id)
      this.$router.go(-1)
    } else if (inStatusPage) {
      this.$router.push('/management/data')
    } else {
      // 从sql查询返回主页面，不保留上一次在主页面查看的数据，也不传递在sql查询子页面查看的数据到主页面
      DataStore.setSelectedDatasetId(-1)
      this.selectedKeys = []
      this.$router.push('/management/data')
    }
  }

  // 取消导入
  public async cancelDatabaseImport() {
    await DataStore.cancelDatabaseImport().then((response) => {
      if (response.data.code === 100) {
        // 停止轮询
        this.clearProgressesInterval()
        this.$message.success('未完成任务取消成功')
      } else if (response.data.code === 40010) {
        // 任务实际已经传输成功，提示相应结果
        this.$message.config({ maxCount: 2 })
        this.$message.warn('数据导入已结束，取消失败')
      } else {
        this.$message.error('任务取消失败', response.data.message)
      }
    })
    // 清除导入的数据状态
    this.$refs.dataUploadPage.clearImportStatus()
    this.uploadFinished = true
  }

  // 设置侧边栏选中的项目
  public setSelectedKeys(keys: any) {
    this.selectedKeys = keys
    let selectedCategory = ''
    DataStore.datasetCategory.forEach((category) => {
      category.dataset.forEach((dataset) => {
        if (
          keys[0].includes(dataset.id) ||
          keys[0].replace('graph-', '').includes(dataset.name)
        ) {
          selectedCategory = `category${category.categoryId}`
        }
      })
    })
    if (DataStore.graphFileList.includes(keys[0].replace('graph-', ''))) {
      DataStore.setIsUploading(false) // 代表不是上传页面了
      // 再找图文件数据集
      DataStore.setSelectedGraphFileName(keys[0].replace('graph-', ''))
    }
    const expandedCategoris = [selectedCategory]
    // const expandedCategoris = [...this.$refs.dataSider.expandedKeys,selectedCategory]
    if (!this.$refs.dataSider.expandedKeys.includes(selectedCategory)) {
      this.$set(this.$refs.dataSider, 'expandedKeys', expandedCategoris)
    }
  }

  /* 导入数据 */
  public uploadData() {
    // 导入数据禁用状态不能进入数据上传界面（禁用状态暂时停用）
    // if (!this.$refs.dataSider?.enableUpload) {
    //   this.$message.info('请先创建数据分类')
    //   return
    // }
    if (!DataStore.isUploading) {
      DataStore.setIsUploading(true)
      DataStore.pushPreSelectedDataset({
        id: DataStore.selectedDatasetId,
        name: this.selectedKeys[0],
        type: '',
      })
      DataStore.setSelectedDatasetId(-1)
    }
    this.$router.push('/management/data/import')
    UserGuideStore.toSpecifiedGuideStep(3)
  }

  // sql查询
  public get isSqlSearch() {
    if (this.$route.path === '/management/data/sqlSearch') {
      DataStore.setIsSqlSearch(true)
    } else {
      DataStore.setIsSqlSearch(false)
    }
    return DataStore.isSqlSearch
  }

  public toggleDataSiderCollapsed() {
    this.dataSiderCollapsed = !this.dataSiderCollapsed
  }
}
</script>

<style lang="less" scoped>
@import '@/constants';

// 数据管理
.data-management-main {
  height: calc(100vh - 108px);
  overflow: hidden;
}

.data-management {
  background: #fff;
  height: calc(100% - 32px);
  margin: 16px;
  padding-left: 24px;
  width: calc(100% - 32px);
}

.data-sider-resize-line {
  background-color: transparent;
  cursor: ew-resize;
  height: 100%;
  position: absolute;
  right: -5px;
  top: 0;
  width: 10px;
}

.buttons {
  align-items: center;
  display: inline-flex;
  flex-direction: row;
  height: 24px;
  justify-content: space-between;
  margin: 10px 0 22px 30px;
  width: calc(100% - 40px);

  .ant-btn-link {
    color: #6973ff;
    font-size: 14px;
    line-height: 24px;

    .arrow-icon {
      margin-left: 2px;
      vertical-align: middle;
    }
  }

  .icon-button-reverse {
    align-items: center;
    background-color: #6772ff;
    border: 1.5px solid #6772ff;
    border-radius: 15px;
    color: #fff;
    display: flex;
    font-size: 13px;
    height: 24px;
    justify-content: center;

    // 前面的icon
    .icon-button-prefix {
      margin-right: 4px;
      width: 14px;
    }
  }
}

.buttons-in-blank {
  background: #6973ff;
  border-bottom: 12px;
  border-radius: 17px;
  box-shadow: 0 2px 6px 0 rgb(101 129 247 / 40%);
  cursor: pointer;
  font-size: 16px;
  height: 34px;
  justify-content: center;
  margin: 14px 0 0;
  width: calc(100% + 6px);
  width: 80%;
}

.buttons-in-blank-nav {
  justify-content: flex-end;
}

// 导入数据按钮禁用时的样式，禁用状态暂时已停用
// .button-disabled {
//   color: #222432;
//   opacity: 0.3;
//   padding-left: 24px;

//   // 前面的icon
//   .icon-button-prefix {
//     margin-right: 4px;
//     width: 14px;
//   }
// }

.sql-search-view,
.data-status-view {
  background: #f3f3f3;
  margin: 16px;
  max-height: calc(100vh - 140px);
  min-height: calc(100vh - 140px);
}

.ant-layout {
  background: #fff;
  bottom: 0;
  height: 100%;
  max-height: calc(100vh - 150px);
  min-height: calc(100vh - 150px);
  overflow-y: hidden;
  padding-top: 15px;
  width: 100%;
}

.return-nav-text {
  color: #373b52;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 22px;
}

.return-nav-text-title,
.upload-text-title {
  padding: 0 16px;
}

.ant-layout-sider {
  background-color: #fff;
  border-right: 1px solid#E9E9E9;
  bottom: 0;
  left: -24px;
  top: 0;
}

.ant-layout-content {
  bottom: 0;
  left: 220px;
  margin-left: -24px;
  right: 0;
  top: 0;
}

// 数据导入部分
.dataview-content-wrapper {
  background-color: #f3f3f7;
  height: 100%;
  //padding: 11px 0 0 15px;
  position: relative;
  width: 100%;
}

// 空状态div
.dataview-empty {
  background-color: #fff;
  height: 100%;
}

.dataview-empty-main {
  align-items: center;
  display: flex;
  height: calc(100% - 56px);
  justify-content: center;
  text-align: center;
}

.dataview-empty-main > div {
  margin-top: -28px;
}

// 数据管理页面内容
.dataview-content {
  align-items: center;
  background-color: #fff;
  height: 100%;
  justify-content: center;
  width: 100%;
}

// 返回栏
.return-bar {
  background-color: #fff;
  border-bottom: 1px solid #f3f3f7;
  height: 54px;
}

.return-nav-bar {
  background-color: #fff;
  height: 54px;
  margin-bottom: 11px;
}

// 取消按钮
.cancel-button {
  color: #6973ff;
  font-size: 16px;
  height: 100%;
  letter-spacing: 1px;
}

// 文字-“导入数据”
.upload-text {
  color: #373b52;
  font-size: 16px;
  height: 100%;
  letter-spacing: 1px;
}

// 内容部分
.content {
  background-color: #fff;
  height: 100%;
  overflow-y: auto;
  width: 100%;

  .data-view-container {
    border-top: 1px solid #e9e9e9;
    height: calc(100% - 56px);
    padding: 16px 0;
  }

  &::-webkit-scrollbar {
    height: 6px;
    visibility: hidden;
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.5);
    border-radius: 6px;
    visibility: hidden;
  }

  &:hover {
    &::-webkit-scrollbar {
      visibility: visible;
    }

    &::-webkit-scrollbar-thumb {
      visibility: visible;
    }
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
  }
}

// 导入部分
.upload-content {
  background-color: #fff;
  height: calc(100% - 66px);
  overflow-y: auto;
  width: 100%;
}

// 上传过程中覆盖的蒙层
.upload-mask {
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 999;
}

// 导入进度部分
.upload-progress-container {
  background-color: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
  max-height: 168px;
  position: fixed;
  width: 366px;
  z-index: 1000;
}

// sql查询
.sql-search-content {
  background-color: #fff;
  height: calc(100% - 66px);
  left: 0;
  overflow-y: auto;
  position: absolute;
  right: 0;
}

.dataview-sql {
  align-items: center;
  background-color: #fff;
  display: flex;
  height: 100%;
  justify-content: center;
  text-align: center;
}

.handler {
  background: #dee3f7;
  color: #1e49f8;
  cursor: pointer;
  font-size: 9px;
  height: 70px;
  line-height: 70px;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-100%);
  width: 12px;
  z-index: 101;

  &::before,
  &::after {
    border: 6px solid #dee3f7;
    content: '';
    height: 0;
    left: 0;
    position: absolute;
    width: 0;
  }

  &::before {
    border-right-color: transparent;
    border-top-color: transparent;
    top: -12px;
  }

  &::after {
    border-bottom-color: transparent;
    border-right-color: transparent;
    bottom: -12px;
  }
}

.handler:hover {
  background: #6670fa;
  color: #fff;

  &::before {
    border: 6px solid #6670fa;
    border-right-color: transparent;
    border-top-color: transparent;
  }

  &::after {
    border: 6px solid #6670fa;
    border-bottom-color: transparent;
    border-right-color: transparent;
  }
}

.highlight-line {
  background: #dee3f7;
  height: calc(100% - 164px);
  position: absolute;
  right: 0;
  top: 138px;
  width: 0;
  z-index: 100;
}

.handler:hover + .highlight-line {
  background: #6670fa;
  width: 1px;
}
</style>
